<!--templates-->
<div class="animated fadeIn" >
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header" th:inline="text">
                    <i class="fa fa-align-justify"></i> [[${pageTitle}]]
                </div>
                <div class="card-body">
                    <div class=" form-horizontal">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                            <legend>权限基本信息</legend>
                        </fieldset>
                        <div class="layui-form-item row">
                            <label class="layui-form-label">权限代码</label>
                            <div class="layui-input-block col-md-4">
                                <input type="text" name="key" lay-verify="required" autocomplete="off" placeholder="请输入权限代码" class="layui-input" th:field="${sysRole.key}" readonly="true"></input>
                                <input type="hidden" name="id" th:field="${sysRole.id}"></input>
                            </div>
                            <label class="layui-form-label">权限名称</label>
                            <div class="layui-input-block col-md-4">
                                <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入权限名称" class="layui-input" th:field="${sysRole.name}" readonly="true"></input>
                            </div>
                        </div>
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                            <legend>权限菜单信息</legend>
                        </fieldset>
                        <div class="row">
                            <div class="col-md-1">
                            </div>
                            <div class="col-md-4">
                                <table class="layui-table" id="moduleTable"  lay-filter="module"></table><!--lay-skin="nob"-->
                            </div>
                            <div class="col-md-6" style="float: right">
                                <div class="row">
                                    <a shiro:hasPermission="sys:role:auth" class="opreate-btn  layui-btn layui-btn-sm" style="margin-left: 20px" id="authbtn" href="#"><i class="icon-plus"></i>菜单赋权</a>
                                </div>
                                <table class="layui-table table-responsive-sm" id="menuTable" lay-filter="menu" ></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/.row-->
        </div>
    </div>
</div>

<!--js-->
<script th:inline="javascript">

    var checkedMudleId;
    var checkedtreegrid;

    /*<![CDATA[*/
    var pageTitle=/*[[${pageTitle}]]*/;//取值
    /*]]>*/

    /*<![CDATA[*/
    var roleid=/*[[${sysRole.id}]]*/;//取值
    /*]]>*/

    layui.config({
        base: '../lib/layui/layuiextend/treegrid/'
    }).use(['laytpl', 'treegrid',"table"], function () {
        var laytpl = layui.laytpl,table=layui.table,
                treegrid = layui.treegrid;
        treegrid.config.render = function (viewid, data) {
            var view = document.getElementById(viewid).innerHTML;
            return laytpl(view).render(data) || '';
        };

        table.render({
            elem: '#moduleTable'
            ,url:'/api/sys/module/getModuleForPaging'
            ,page: false
            ,cols: [[
                {field:'name',title: '模块名称',event: 'setName',width:'90%'}
            ]],
            response: {
                countName: 'total',
                dataName: 'rows'
            },
            done: function(res, curr, count) {
                if (res.rows.length>0) {
                    if(checkedMudleId==null) {
                        checkedMudleId=res.rows[0].id;
                    }
                    getJSON("/api/sys/menu/getMenuForPaging?moduleId=" + checkedMudleId)
                            .catch(error => {

                            }).then(value => {
                        var rows=JSON.parse(value);
                        checkedtreegrid=treegrid.createNew({
                            elem: 'menuTable',
                            view: 'menuView',
                            data: {rows: rows},
                            id: 'id',
                            root: "-1",
                            parentid: 'parentId',
                            singleSelect: false
                        });
                        checkedtreegrid.build();
                        /*<![CDATA[*/
                        getJSON("/api/sys/menu/getUserMenuForTree?moduleId="+checkedMudleId+"&roleId="+roleid)
                                .catch( error => {

                                }).then( value => {
                            var rows=JSON.parse(value);
                            var menuids=new Array();
                            $.each(rows, function (_, row) {
                                menuids.push(row["id"]);
                            });
                            checkedtreegrid.selectValue(menuids);
                        })
                        /*]]>*/
                    })
                }
            }
        });

        table.on('tool(module)', function(obj){
            debugger;
            var data = obj.data;
            var event=obj.event;
            if(event=="setName"){
                checkedMudleId=data.id;
                getJSON("/api/sys/menu/getMenuForPaging?moduleId="+checkedMudleId)
                        .catch( error => {

                        }).then( value => {
                    debugger;
                    var rows=JSON.parse(value);
                    checkedtreegrid=treegrid.createNew({
                        elem: 'menuTable',
                        view: 'menuView',
                        data: {rows: rows},
                        id: 'id',
                        root: "-1",
                        parentid: 'parentId',
                        singleSelect: false
                    });
                    checkedtreegrid.build();
                    /*<![CDATA[*/
                    getJSON("/api/sys/menu/getUserMenuForTree?moduleId="+checkedMudleId+"&roleId="+roleid)
                            .catch( error => {

                            }).then( value => {
                        var rows=JSON.parse(value);
                        var menuids=new Array();
                        $.each(rows, function (_, row) {
                            menuids.push(row["id"]);
                        });
                        checkedtreegrid.selectValue(menuids);
                    })
                    /*]]>*/
                })
            }
        });

        $('#authbtn').on('click', function(){
            debugger;
            var row =checkedtreegrid.selectRow();
            debugger;
            postJSON("/api/sys/role/menuauth",{"sysMenus":row,"roleId":roleid,"moduleId":checkedMudleId})
                    .catch(error => {

                    })
                    .then(value =>{
                        if(value==undefined) {
                            layer.alert(pageTitle+"失败!", {icon: 2});
                        }else{
                            var result=JSON.parse(value);
                            if (result == true) {
                                layer.alert( pageTitle+'成功!',{
                                    icon: 6
                                    ,btn: ['确认']
                                    ,yes: function(index) {
                                        layer.close(index);
                                        getJSON("/api/sys/menu/getMenuForPaging?moduleId="+checkedMudleId)
                                                .catch( error => {

                                                }).then( value => {
                                            debugger;
                                            var rows=JSON.parse(value);
                                            checkedtreegrid=treegrid.createNew({
                                                elem: 'menuTable',
                                                view: 'menuView',
                                                data: {rows: rows},
                                                id: 'id',
                                                root: "-1",
                                                parentid: 'parentId',
                                                singleSelect: false
                                            });
                                            checkedtreegrid.build();
                                            /*<![CDATA[*/
                                            getJSON("/api/sys/menu/getUserMenuForTree?moduleId="+checkedMudleId+"&roleId="+roleid)
                                                    .catch( error => {

                                                    }).then( value => {
                                                var rows=JSON.parse(value);
                                                var menuids=new Array();
                                                $.each(rows, function (_, row) {
                                                    menuids.push(row["id"]);
                                                });
                                                checkedtreegrid.selectValue(menuids);
                                            })
                                            /*]]>*/
                                        })
                                    }
                                });
                            } else {
                                layer.alert(pageTitle+"失败!", {icon: 2});
                            }
                        }
                    });

        });

    });

</script>
<!--模板 js start-->
<script id="menuView" type="text/html">
    <table class="layui-table">
        <thead>
        <tr>
            <th>菜单名称</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.rows,function(index,r){ }}
        <tr>
            <td><input type="checkbox" />  <i class="{{r.icon}}"></i>  {{r.name}}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>
<!--模板 end-->

<!--css-->
<style type="text/css">

</style>